<!doctype html>
<html class="theme_light tw-h-full">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Bitwarden WebAuthn Connector</title>
  </head>

  <body class="tw-min-h-full !tw-min-w-0 tw-text-center !tw-bg-background-alt">
    <main class="tw-flex tw-w-full tw-mx-auto tw-flex-col tw-px-6 tw-pt-6 tw-pb-4 tw-text-main">
      <a class="tw-w-[128px] tw-block tw-mb-12 [&>*]:tw-align-top">
        <img class="new-logo-themed" alt="Bitwarden" />
      </a>

      <div class="tw-text-center tw-mb-6 tw-max-w-md tw-mx-auto">
        <div class="tw-mx-auto tw-max-w-20 sm:tw-max-w-24">
          <!-- Matches TwoFactorAuthWebAuthnIcon -->
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="3.33 3.33 76.49 75.83">
            <path
              class="tw-fill-illustration-bg-primary"
              d="M3.333 8.334a5 5 0 0 1 5-5H35a5 5 0 0 1 5 5v56.667a5 5 0 0 1-5 5H8.333a5 5 0 0 1-5-5V8.334Z"
            />
            <path
              class="tw-fill-illustration-outline"
              fill-rule="evenodd"
              d="M35 5H8.333A3.333 3.333 0 0 0 5 8.335v56.667a3.333 3.333 0 0 0 3.333 3.333H35a3.333 3.333 0 0 0 3.333-3.333V8.334A3.333 3.333 0 0 0 35 5.001ZM8.333 3.335a5 5 0 0 0-5 5v56.667a5 5 0 0 0 5 5H35a5 5 0 0 0 5-5V8.334a5 5 0 0 0-5-5H8.333Z"
              clip-rule="evenodd"
            />
            <path
              class="tw-fill-illustration-outline"
              fill-rule="evenodd"
              d="M18.333 9.167c0-.46.373-.833.834-.833h5a.833.833 0 0 1 0 1.667h-5a.833.833 0 0 1-.834-.834Z"
              clip-rule="evenodd"
            />
            <path
              class="tw-fill-illustration-tertiary"
              d="M36.667 38.333c0 10.126-6.716 18.334-15 18.334-8.285 0-15-8.208-15-18.334 0-10.125 6.715-18.333 15-18.333 8.284 0 15 8.208 15 18.333Z"
            />
            <path
              class="tw-fill-illustration-outline"
              fill-rule="evenodd"
              d="M21.667 55C28.733 55 35 47.866 35 38.333c0-9.533-6.267-16.666-13.333-16.666-7.067 0-13.334 7.133-13.334 16.666C8.333 47.866 14.6 55 21.667 55Zm0 1.667c8.284 0 15-8.208 15-18.334 0-10.125-6.716-18.333-15-18.333-8.285 0-15 8.208-15 18.333 0 10.126 6.715 18.334 15 18.334Z"
              clip-rule="evenodd"
            />
            <path
              class="tw-fill-illustration-bg-tertiary"
              d="M68.333 35c0 6.444-5.223 11.667-11.666 11.667C50.223 46.667 45 41.444 45 35.001c0-6.444 5.223-11.667 11.667-11.667 6.443 0 11.666 5.223 11.666 11.667Z"
            />
            <path
              class="tw-fill-illustration-outline"
              fill-rule="evenodd"
              d="M56.667 45c5.523 0 10-4.477 10-10 0-5.522-4.477-10-10-10s-10 4.478-10 10c0 5.523 4.477 10 10 10Zm0 1.667c6.443 0 11.666-5.223 11.666-11.666 0-6.444-5.223-11.667-11.666-11.667C50.223 23.334 45 28.557 45 35.001c0 6.443 5.223 11.666 11.667 11.666Z"
              clip-rule="evenodd"
            />
            <path
              class="tw-fill-illustration-bg-tertiary"
              fill-rule="evenodd"
              d="M78.255 59.98a22.918 22.918 0 0 1 1.559 5.854H41.667v-8.333h-4.549a22.916 22.916 0 0 1 41.137 2.48Z"
              clip-rule="evenodd"
            />
            <path
              class="tw-fill-illustration-outline"
              fill-rule="evenodd"
              d="M43.333 55.834v8.333h34.5a21.238 21.238 0 0 0-5.724-10.442 21.25 21.25 0 0 0-31.9 2.109h3.124Zm-5.18 0c-.368.54-.714 1.096-1.035 1.667h4.549v8.333h38.147a22.875 22.875 0 0 0-1.558-5.853 22.915 22.915 0 0 0-40.102-4.147Z"
              clip-rule="evenodd"
            />
            <path
              class="tw-fill-illustration-bg-secondary"
              fill-rule="evenodd"
              d="M39.167 79.167c5.272 0 9.829-3.06 11.993-7.5h5.65c.442 0 .866-.176 1.178-.489L60 69.168l1.91 1.91a.833.833 0 0 0 1.18 0l.66-.66.66.66a.833.833 0 0 0 1.18 0l1.91-1.91 2.012 2.011c.312.313.736.489 1.178.489h2.786c.442 0 .866-.176 1.179-.489l5.05-5.05a.417.417 0 0 0 0-.59l-5.05-5.05A1.667 1.667 0 0 0 73.476 60H51.16c-2.164-4.44-6.721-7.5-11.993-7.5-7.364 0-13.334 5.97-13.334 13.333 0 7.364 5.97 13.334 13.334 13.334Zm-5-10.834a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"
              clip-rule="evenodd"
            />
            <path
              class="tw-fill-illustration-outline"
              fill-rule="evenodd"
              d="M50.118 70h6.692L60 66.81l2.5 2.5 1.25-1.25L65 69.31l2.5-2.5L70.69 70h2.786l4.167-4.167-4.167-4.166H50.118l-.457-.937a11.667 11.667 0 0 0-10.494-6.563c-6.444 0-11.667 5.223-11.667 11.666 0 6.444 5.223 11.667 11.667 11.667 4.61 0 8.6-2.674 10.494-6.563l.457-.937Zm29.587-3.872a.417.417 0 0 0 0-.59l-5.05-5.05A1.667 1.667 0 0 0 73.476 60H51.16c-2.164-4.44-6.721-7.5-11.993-7.5-7.364 0-13.334 5.97-13.334 13.333 0 7.364 5.97 13.334 13.334 13.334 5.272 0 9.829-3.06 11.993-7.5h5.65c.442 0 .866-.176 1.178-.489L60 69.168l1.91 1.91a.833.833 0 0 0 1.179.001l.661-.661.66.66.002.001a.833.833 0 0 0 1.177 0l1.911-1.911 2.012 2.011c.312.313.736.489 1.178.489h2.786c.442 0 .866-.176 1.179-.489l5.05-5.05Zm-41.372-.295a4.167 4.167 0 1 1-8.333 0 4.167 4.167 0 0 1 8.333 0Zm-1.666 0a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM16.126 28.497a15.793 15.793 0 0 1 5.542-.996c1.95 0 3.818.352 5.541.996a.833.833 0 0 0 .584-1.56 17.462 17.462 0 0 0-6.125-1.103c-2.154 0-4.218.39-6.125 1.102a.833.833 0 1 0 .583 1.561Zm5.542 2.337a11.648 11.648 0 0 0-9.335 4.667.833.833 0 1 1-1.332-1 13.314 13.314 0 0 1 10.667-5.334c4.331 0 7.947 1.77 10.59 4.41a.833.833 0 1 1-1.179 1.18c-2.36-2.36-5.564-3.923-9.411-3.923Zm-.117 1.667c-5.377 0-9.63 4.555-9.26 9.92l.075 1.081c.097 1.4.428 2.772.98 4.061l.47 1.099a.833.833 0 1 0 1.532-.656l-.47-1.1a10.835 10.835 0 0 1-.85-3.519l-.074-1.08a7.615 7.615 0 1 1 15.212-.524v.718a.833.833 0 0 1-1.666 0v-.834a5.848 5.848 0 0 0-1.522-3.927c-1.054-1.146-2.637-1.906-4.728-1.906-2.173 0-3.575.99-4.397 2.254-.79 1.216-1.02 2.639-1.02 3.58 0 2.326.209 4.02.794 5.424.593 1.425 1.54 2.465 2.84 3.549a.833.833 0 1 0 1.067-1.28c-1.2-1-1.921-1.835-2.369-2.91-.457-1.097-.665-2.527-.665-4.784 0-.726.187-1.803.75-2.67.533-.82 1.423-1.496 3-1.496 1.659 0 2.785.589 3.501 1.368a4.181 4.181 0 0 1 1.082 2.798v.834a2.5 2.5 0 0 0 5 0v-.718a9.282 9.282 0 0 0-9.282-9.282Zm-.754 9.116c0-.42.347-.783.823-.783a.88.88 0 0 1 .88.88v1.364a4.68 4.68 0 0 0 1.872 3.743l.684.513a5 5 0 0 0 3 1h.277a.833.833 0 0 0 0-1.667h-.277a3.334 3.334 0 0 1-2-.666l-.684-.513a3.013 3.013 0 0 1-1.205-2.41v-1.364a2.547 2.547 0 0 0-2.547-2.547c-1.342 0-2.492 1.056-2.49 2.453.001.82.033 1.85.148 2.804.125 1.035.627 1.848 1.163 2.526.244.31.509.608.757.887l.066.074c.274.308.526.597.752.895.553.729.7 1.326.544 1.719a.833.833 0 0 0 1.547.619c.504-1.26-.137-2.52-.763-3.345-.27-.356-.562-.688-.834-.994l-.06-.069a18.78 18.78 0 0 1-.701-.819c-.456-.577-.745-1.1-.817-1.693a23.012 23.012 0 0 1-.135-2.607Z"
              clip-rule="evenodd"
            />
          </svg>
        </div>

        <div>
          <!-- Small screens -->
          <h1 bitTypography="h3" class="tw-mt-2 sm:tw-hidden" id="title-smaller-screens"></h1>
          <!-- Medium to Larger screens -->
          <h1
            bitTypography="h2"
            class="tw-mt-2 tw-hidden sm:tw-block"
            id="title-larger-screens"
          ></h1>
        </div>

        <div class="tw-text-sm sm:tw-text-base" id="subtitle"></div>
      </div>

      <div
        class="tw-grow tw-w-full tw-max-w-md tw-mx-auto tw-flex tw-flex-col tw-items-center sm:tw-min-w-[28rem]"
      >
        <div
          class="tw-rounded-2xl tw-mb-10 tw-mx-auto tw-w-full sm:tw-bg-background sm:tw-border sm:tw-border-solid sm:tw-border-secondary-300 sm:tw-p-8"
        >
          <p id="msg" class="tw-hidden"></p>

          <div class="tw-block tw-mb-4">
            <input type="checkbox" class="" id="remember" name="remember" />
            <label
              class="tw-inline-flex tw-gap-1 tw-items-baseline tw-flex-row tw-min-w-0 !tw-font-normal"
              for="remember"
              id="remember-label"
            ></label>
          </div>

          <button
            type="button"
            id="webauthn-button"
            class="!tw-text-contrast disabled:!tw-text-muted disabled:hover:!tw-text-muted disabled:hover:tw-bg-secondary-300 disabled:hover:tw-border-secondary-300 disabled:hover:tw-no-underline disabled:tw-bg-secondary-300 disabled:tw-border-secondary-300 disabled:tw-cursor-not-allowed focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2 focus-visible:tw-ring-primary-600 focus-visible:tw-z-10 focus:tw-outline-none hover:tw-bg-primary-700 hover:tw-border-primary-700 hover:tw-no-underline tw-bg-primary-600 tw-block tw-border-2 tw-border-primary-600 tw-border-solid tw-font-medium tw-no-underline tw-px-3 tw-py-1.5 tw-rounded-full tw-text-center tw-transition tw-w-full"
          ></button>
        </div>
      </div>
    </main>
  </body>
</html>
